<script setup lang="ts">
import { ref } from 'vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
import headerNavBar from '@/components/headerNavBar.vue';
import bg1 from '@/assets/images/IntegralLedger/bg_1.webp';
import ico1 from '@/assets/images/IntegralLedger/ico_1.png';
import ico2 from '@/assets/images/IntegralLedger/ico_2.png';
import { useNavBarHeight } from '@/composables/useNavBarHeight';
import type { OnPage } from '@/composables/useList';
import { useList } from '@/composables/useList';
import { userjifenList } from '@/common/api/integralLedger';

const { navBarHeight } = useNavBarHeight();
const [largenScreen] = useLargenScreen();

const keyword = ref(''); // 搜索关键字

const server: OnPage = async (listConfig) => {
  const res = await userjifenList({ ...listConfig, keyword: keyword.value });
  const { list } = res.result;
  console.log('userjifenList: ', list);
  return list;
};

const { list, loading, finished, error, refreshing, onLoad, onRefresh, onRefreshCurrent } = useList(server);
</script>
<template>
  <div
    class="IntegralLedger bg-[length:100%_auto] bg-no-repeat scroll-hidden"
    :class="{ boxShadow: largenScreen }"
    :style="{ backgroundImage: `url(${bg1})`, paddingTop: `${navBarHeight}px` }"
  >
    <headerNavBar :placeholder="false" transparent text-color="#000000" scroll-el=".IntegralLedger" />
    <van-config-provider :theme-vars="{ pullRefreshHeadTextColor: 'white' }">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #loading>
          <div class="text-white flex items-center justify-center">
            <van-loading type="spinner" color="#ffffff" size="16" />
            <span class="ml-1">加载中...</span>
          </div>
        </template>
        <!-- 搜索框 -->
        <div class="mx-4 mt-5 rounded-full bg-white overflow-hidden flex items-center p-1">
          <van-image class="ml-2" width="16" height="16" :src="ico1" />
          <div class="flex-1 px-2">
            <van-field
              class="!p-0"
              v-model="keyword"
              placeholder="搜索手机号/邀请码/昵称"
              clearable
              @keyup.enter="onRefresh"
            />
          </div>
          <van-button
            class="!px-4 !text-black"
            type="primary"
            size="small"
            round
            color="#FFC342"
            @click="onRefresh"
            :disabled="loading"
          >
            搜索
          </van-button>
        </div>
        <!-- 列表 -->
        <van-list
          v-model:loading="loading"
          v-model:error="error"
          :finished="finished"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          <div class="px-4 pt-5 pb-5">
            <div class="bg-white rounded-lg p-2 flex items-center mb-2" v-for="(item, i) in list" :key="i">
              <van-image
                radius="10"
                width="55"
                height="55"
                lazy-load
                fit="cover"
                :src="item.headimg + '?x-oss-process=image/resize,m_fixed,h_55,w_55'"
              />
              <div class="flex-1 pl-3">
                <div class="text-sm mb-1">{{ item.nickname }}</div>
                <div class="text-xs">
                  <span class="text-[#999999] mr-1">创建时间</span>
                  <span>{{ item.crt_time }}</span>
                </div>
              </div>
              <div class="flex flex-col items-end">
                <div class="flex items-center">
                  <van-image class="mr-1" width="14" height="14" :src="ico2" />
                  <div class="text-sm">{{ item.jifen }}</div>
                </div>
                <div class="text-xs text-[#B9B9B9]">积分总数</div>
              </div>
            </div>
            <van-empty class="!pt-14" v-if="finished && !list.length" />
            <!-- 底部安全区 -->
            <div class="van-safe-area-bottom"></div>
          </div>
        </van-list>
      </van-pull-refresh>
    </van-config-provider>
  </div>
</template>
<style lang="less" scoped>
.IntegralLedger {
  overflow-y: auto;
  background-color: #f6f6f6;
  height: 100vh;
  max-width: 450px;
}
.IntegralLedger.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
